<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="/A0723/include :: header('首页')"/>
</head>

<body>
<div class="mui-content">
    <!-- 轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper" id="swiper">
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- 实时收益 -->
    <div class="index_new">
        <div class="flex3">
            <div><i class="iconfont icon-gonggao2"></i>实时收益</div>
        </div>
        <ul id="notices" style="text-align: center">
            <li>
                <div class="mui-row">
                    <div class="mui-col-xs-4">
                        <span>可用余额</span>
                        <div id="balance">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>本周收益</span>
                        <div id="weekEarnings">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>总收益</span>
                        <div id="totalEarnings">111</div>
                    </div>

                </div>

            </li>
            <li>
                <div class="mui-row">
                    <div class="mui-col-xs-4">
                        <span>今日团队收益</span>
                        <div id="todayTeamBenefits">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>本月收益</span>
                        <div id="monthEarnings">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>今日任务数</span>
                        <div id="todayTasks">111</div>
                    </div>

                </div>

            </li>
            <li>
                <div class="mui-row">
                    <div class="mui-col-xs-4">
                        <span>今日任务收益</span>
                        <div id="todayEarnings">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>上月收益</span>
                        <div id="lastMonthEarnings">111</div>
                    </div>
                    <div class="mui-col-xs-4">
                        <span>今日剩余任务</span>
                        <div id="todayRemainingTasks">111</div>
                    </div>

                </div>

            </li>

        </ul>
    </div>
    <th:block th:include="/A0723/include :: menu"/>
</div>

<th:block th:include="/A0723/include :: footer"/>
<script type="text/javascript">
    $(function () {
        getRealTimeIncome();
        getCarouselList();
        mui('body').on('tap', 'a', function () {
            window.top.location.href = this.href;
        });
    })
    //轮播图
    const mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
        },
    });

    //获取用户实时收益
    function getRealTimeIncome() {
        mui.ajax(ctx + 'front/getRealTimeIncome', {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                $("#balance").text(res.data.balance)
                $("#weekEarnings").text(res.data.weekEarnings)
                $("#totalEarnings").text(res.data.totalEarnings)
                $("#todayTeamBenefits").text(res.data.todayTeamBenefits)
                $("#monthEarnings").text(res.data.monthEarnings)
                $("#todayTasks").text(res.data.todayTasks+'/'+res.data.taskNum)
                $("#todayEarnings").text(res.data.todayEarnings)
                $("#lastMonthEarnings").text(res.data.lastMonthEarnings)
                $("#todayRemainingTasks").text(res.data.todayRemainingTasks)
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });

    }

    //获取轮播图列表
    function getCarouselList() {
        mui.ajax(ctx + 'front/carouselList', {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                let str = ''
                $.each(res.data, function (i, d) {
                    str += ' <div class="swiper-slide"><img src="' + d.url + '"></div>'
                })
                $("#swiper").append(str)

            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });

    }
</script>
</body>

</html>
